<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=3,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
	<title>订单详情</title>
	<link href="css/public/reset-html5.css" rel="stylesheet">
	<link href="css/public/mui.min.css" rel="stylesheet">
	<link href="css/wx-main.css?20161028_1" rel="stylesheet">
	<link rel="stylesheet" href="css/recycle_order.css">
</head>
<body id="main">
<header class="text-color1">
	<span class="left-btn text-color2" onclick="location.href='index.html'">返回</span>
</header>
<div class="mui-card">
	<div class="mui-card-header primary-text">订单状态</div>
	<div class="mui-card-content-inner">
		<p>订单编号：<span v-text="order.order_num"></span></p>
		
		<img class="status" src="image/status/recycle/{{order.status}}.png" alt="">
		
		<div class="text-center">
			<span class="circle-1" v-text="orderStatus[order.status]"></span>
			
			<p v-if="order.repair_way==1" class="text-color3 pad" v-text="statusMap[order.status]" style="margin:0;"></p>
			<p v-if="order.repair_way==2" class="text-color3 pad" v-text="statusMap1[order.status]" style="margin:0;"></p>
		</div>
		<div v-if="order.status==3" style="text-align: center;">
			<span>回收金额:</span>
			<span style="color:#ffa726;"><span v-text="order.price?order.price:order.valuation"></span><span>元</span></span>
		</div>
		<div class="text-center">
			<div v-show="order.status==5">
				<button class="primary-bg text-color2 btn" v-on:click="confirmOrder()">确认回收</button>
			</div>
			<button v-show="order.status==0" class="primary-bg text-color2 btn" v-on:click="cancelOrder()" style="margin-top:0;background: #fff;color: #ccc;border: 1px solid #ccc;">取消订单</button>
			<div v-show="order.status==6">
				<button class="primary-bg text-color2 btn" v-on:click="evaluate()">评价</button>
			</div>
		</div>
	</div>
</div>


<div class="mui-card" v-if="order.status>0 && order.status!=4 && order.repair_way==2">
	<div class="mui-card-header primary-text">门店信息</div>
	<table>
		<tr>
			<td>门店名称</td>
			<td v-text="order.m_name"></td>
		</tr>
		<tr>
			<td>门店电话</td>
			<td><a href="tel:{{order.m_tel}}" v-text="order.m_tel"></a></td>
		</tr>
		<tr>
			<td>门店地址</td>
			<td v-text="order.master_info.m_address"></td>
		</tr>
		<tr>
			<td>营业时间</td>
			<td v-text="order.master_info.m_business_hours"></td>
		</tr>
	</table>
</div>

<div class="mui-card" v-if="order.status>0 && order.status!=4 && order.repair_way==1">
	<div class="mui-card-header primary-text">师傅信息</div>
	<table>
		<tr>
			<th></th>
			<th></th>
			<th style="position: relative;vertical-align: middle;" width="100" rowspan="4">
				<img v-if="order.master_info.m_head_imgurl" src="{{order.master_info.m_head_imgurl}}" style="height:70px;width:70px;border-radius: 50%;position:absolute;top:0;bottom:0;left:0;margin:auto;" alt="">
			</th>
		</tr>
		<tr v-show="order.master_info.m_job_num">
			<td>工号</td>
			<td v-text="order.master_info.m_job_num"></td>
		</tr>
		<tr>
			<td>姓名</td>
			<td v-text="order.m_name"></td>
		</tr>
		<tr>
			<td>手机号</td>
			<td><a href="tel:{{order.m_account}}" v-text="order.m_account"></a></td>
		</tr>
	</table>
</div>

<div class="mui-card">
	<div class="mui-card-header primary-text">回收信息</div>
	<table>
		<tr>
			<td>回收方式</td>
			<td v-text="recycleWays[order.repair_way]"></td>
		</tr>
		<tr>
			<td>回收机型</td>
			<td v-text="order.v_name"></td>
		</tr>
		<tr>
			<td>费用预估</td>
			<td v-text="order.valuation"></td>
		</tr>
	</table>
</div>

<div class="mui-card">
	<div class="mui-card-header primary-text">联系信息</div>
	<table>
		<tr>
			<td>手机号码</td>
			<td v-text="order.phone_number"></td>
		</tr>
		<tr>
			<td>地区</td>
			<td v-text="order.region"></td>
		</tr>
		<tbody v-if="order.repair_way==1">
			<tr>
				<td>详细地址</td>
				<td v-text="order.address"></td>
			</tr>
			<tr>
				<td>上门时间</td>
				<td v-text="order.door_time"></td>
			</tr>
		</tbody>
		
	</table>
</div>

</body>
<script src="js/public/jquery-2.2.1.min.js"></script>
<script src="../plugins/vue/vue.min.js"></script>
<script src="js/public/mui.min.js"></script>
<script src="js/phone.js"></script>
<script src="layer_mobile/layer.js"></script>
<script>
	var rid = phone_getQueryString("rid");
	if (!rid) {
		alert("缺少订单id");
		window.history.back();
	}
	
	var statusMap = {
		0: "您的订单已提交，我们将尽快为您安排",
		1: "您的订单已安排师傅上门为您服务。",
		2: "您的订单已安排师傅上门为您服务。",
		3: "师傅已为您检测完毕，\n请确认回收金额是否同意。",
		4: "该订单已取消。",
		6: "订单已完成。"
	};
	
	var statusMap1 = {
		0: "您的订单已提交，我们将尽快为您安排",
		1: "订单已受理，请在营业时间内到店检测回收",
		2: "订单已受理，请在营业时间内到店检测回收",
		3: "师傅已为您检测完毕，\n请确认回收金额是否同意。",
		4: "该订单已取消。",
		6: "订单已完成。"
	};
	
	var vue = new Vue({
		el: "#main",
		data: {
			recycleWays : ["", "上门回收", "到店回收"],
			order: {},
			orderStatus: recycleStatus,
			statusMap:statusMap,
			statusMap1:statusMap1
		},
		methods: {
			"confirmOrder":function(){
				var index = layer.open({type: 2,shadeClose:false});
				$.post(apiRecycle+"index.php/Home/User/agreed_price", {rid:rid}, function(res){
					if(res.code==200){
						vue.order.status=6;
					} else {
						mui.toast(res.message,{ duration:'long', type:'div'});
					}
					layer.close(index);
				}, "json");
			},
			
			"cancelOrder":function(){
				mui.confirm('确认取消？',' ',['是','否'], function(msg){
					if(msg.index==0){
						var index = layer.open({type: 2,shadeClose:false});
						$.post(apiRecycle+"index.php/Home/User/cancel_order", {rid:rid}, function(res){
							if(res.code==200){vue.order.status=4;}
							else {mui.toast(res.message,{ duration:'long', type:'div'});}
							layer.close(index);
						}, "json");
					}
				},'div');
			},
			"evaluate":function(){
				location.href="create_comment.html?rid="+rid
			}
		},
		ready: function () {
			var index = layer.open({type: 2,shadeClose:false});
			$.post(apiRecycle + "index.php/Home/User/get_order", {
				rid: rid
			}, function (res) {
				vue.order = res.data;
				layer.close(index);
			}, "json")
		}
	});
</script>
</html>